<template>
	<!-- 实名认证2 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m082}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="pt-3">
			
		</view>
		<view class="mx-6 title A-Regular" :class="model=='light'?'titleLight':''">
			{{i18n.m094}}
		</view>
		<view class="desc mx-6 A-Medium mt-2 flex align-start">
			<text>*</text>{{i18n.m095}}
		</view>
		<!-- 身份证正面 -->
		<view @click="openPopup(1)" class="bgWrap f0 mx-auto mt-4">
			<image class="img" :src="'/static/images/id1_'+model+'.png'" mode=""></image>
			<view class="text A-Medium text-alignC" :class="model=='light'?'textLight':''">
				{{i18n.m096}}
			</view>
			<image v-if="img1" class="img2" :src="$tool.changeImg(img1)" mode=""></image>
		</view>
		<!-- 身份证反面 -->
		<view @click="openPopup(2)" class="bgWrap f0 mx-auto mt-6">
			<image class="img" :src="'/static/images/id2_'+model+'.png'" mode=""></image>
			<view class="text A-Medium text-alignC" :class="model=='light'?'textLight':''">
				{{i18n.m097}}
			</view>
			<image v-if="img2" class="img2" :src="$tool.changeImg(img2)" mode=""></image>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-8 clickCss">
			{{i18n.m074}}
		</view>
		<!-- 上传图片 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm(item)" v-for="(item,index) in popupList" :style="index==2?'border:none;':''" class="list py-3" :class="model=='light'?'listLight':''">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		cardAuth,
		passportAuth
	} from '@/core/api/user.js';
	export default {
		data(){
			return {
				authType:'',
				name: '',
				cardNum: '',
				popupList:[
					{
						id:1,
						name:''
					},{
						id:2,
						name:''
					},{
						id:3,
						name:''
					},
				],
				popupType:1,//1正面 2反面
				img1:'',//正面
				img2:'',//反面
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad(options) {
			this.authType = options.authType;
			this.name = options.name;
			this.cardNum = options.cardNum;
			this.initDate();
		},
		methods:{
			openPopup(type) {
				this.popupType = type;
				this.$refs.popup.open('bottom');
			},
			closePopup(){
				this.$refs.popup.close();
			},
			confirm(item){
				this.closePopup();
				if(item.id==1||item.id==2){
					this.$tool.uploadImg({count:1},item.id).then(res=>{
						uni.hideLoading();
						console.log(res[0],'cs')
						if(this.popupType==1){
							this.img1 = res[0];
						}
						if(this.popupType==2){
							this.img2 = res[0];
						}
					})
				}
			},
			submit(){
				if(this.img1==='') return this.$tool.showToast(this.i18n2.st017);
				if(this.img2==='') return this.$tool.showToast(this.i18n2.st018);
				this.$tool.prePage().submit2(this.img1,this.img2);
				return;
				let data = {
					mobileUserId:uni.getStorageSync('mobileUserId')
				}
				data.cardBack = this.img2;
				data.cardFront = this.img1;
				this.$tool.showLoading();
				if(this.authType=='Card'){
					data.cardBack = this.img2;
					data.cardFront = this.img1;
					cardAuth(data).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}else if(this.authType=='Passport'){
					data.passport = this.img1;
					data.userImg = this.img2;
					passportAuth(data).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			submitAfter(){
				uni.hideLoading();
				this.$tool.showToast(this.i18n2.st016);
				setTimeout(res=>{
					this.$tool.goBack();
				},800)
			},
			initDate() {
				for (let i = 0; i < this.popupList.length; i++) {
					this.popupList[i].name = this.i18n['m0' + (i + 44)];
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;
		.titleWrap {
			margin-bottom: 6rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
	.popupWrapLight2 {
		background: #E6E8EF;
		color: #0E0F11;
	}
	
	// 弹窗---结束
	.p-stickyLight {
		background: #fff;
	}
	.title {
		font-size: 32rpx;
		color: #F7F7F7;
	}
	.titleLight {
		color: #0E0F11;
	}
	.desc {
		font-size: 24rpx;
		color: #7F838D;
	}
	.bgWrap {
		width: 650rpx;
		height: 360rpx;
		position: relative;
		.img {
			width: 650rpx;
			height: 360rpx;
		}
		.text {
			width: 650rpx;
			position: absolute;
			bottom: 108rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
		.textLight {
			color: #5951BA;
		}
		.img2 {
			width: 610rpx;
			height: 320rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>